<template>
    <div class="meetingAttendanceForm-template-Lu">
        <a-modal
            v-model:visible="visible"
            title="打印会议签到表"
            width="100%"
            wrapClassName="meetingAttendanceForm-modal-Lu">
            <div style="width: 794px;margin: 0 auto;">
                <a-button v-print="printObj" class="blue-btn">打印</a-button>
                <div id="printTest" class="meetingAttendanceForm-print-box" v-if="visible">
                    <h1>{{ tableData.sqsx?tableData.sqsx.fsxmc:'' }}<br/>审评会议签到表</h1>
                    <table border="1" cellspacing="0" class="meetingAttendanceForm-table" :key="tableKey">
                        <tr>
                            <th style="padding: 0 !important;">
                                企业名称<br/>（地址）
                            </th>
                            <td colspan="3">
                                {{ tableData.sqsx?tableData.sqsx.fqymc:'' }}<br/>{{ tableData.sqsx?tableData.sqsx.fqyzszcdz:'' }}
                            </td>
                        </tr>
                        <tr>
                            <th>审评范围</th>
                            <td colspan="3">{{ tableData.sqsx?tableData.sqsx.fcyjcfw:'' }}</td>
                        </tr>
                        <tr>
                            <th>审评类型</th>
                            <td colspan="3">{{ tableData.sqsx?tableData.sqsx.fjclx:'' }}</td>
                        </tr>
                        <!-- template只能配合v-if使用，和v-show,v-else不生效 -->
                        <template v-for="(item,index) in tableData.hyList" v-if="tableData.hyList.length > 0">
                            <tr>
                                <th rowspan="2" :key="index">{{ item.hy.fhyzt }}</th>
                                <td colspan="3" style="text-align: left;">会议时间：{{ moment(item.hy.fhysj).format('YYYY年MM月DD日') }}</td>
                            </tr>
                            <tr>
                                <td colspan="3" style="text-align: left;">会议地点：{{ item.hy.fhydd }}</td>
                            </tr>
                            <tr>
                                <th colspan="4">审评组参会人员签名</th>
                            </tr>
                            <tr>
                                <th>审评组</th>
                                <td colspan="3" style="text-align: left;">
                                    <span v-for="(itema,indexa) in item.jcyList">
                                        <img v-if="itema.fqmfj" :src="itema.fqmfj" alt="">
                                        <span v-else style="margin-right: 10px;">{{ itema.fxm }}</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>观察员</th>
                                <td colspan="3" style="text-align: left;">
                                    <span v-for="(itemb,indexb) in item.gcyList">
                                        <img v-if="itemb.fqmfj" :src="itemb.fqmfj" alt="">
                                        <span v-else style="margin-right: 10px;">{{ itemb.fxm }}</span>
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th colspan="4">企业参会人员签名</th>
                            </tr>
                            <tr>
                                <th>部门/职务</th>
                                <th>签名</th>
                                <th>部门/职务</th>
                                <th>签名</th>
                            </tr>
                            <tr v-for="(itemc,indexc) in item.qyList" v-if="indexc%2==0">
                                <td>{{item.qyList[indexc]==null?"":item.qyList[indexc].fbm}}/{{ item.qyList[indexc]==null?"":item.qyList[indexc].fzw }}</td>
                                <td>
                                    <img v-if="item.qyList[indexc].fqmfj" :src="item.qyList[indexc].fqmfj" alt="企业签名">
                                    <span v-else>
                                        {{item.qyList[indexc]==null?"":item.qyList[indexc].fxm}}
                                    </span>
                                </td>
                                <td>{{item.qyList[indexc+1]==null?"":item.qyList[indexc+1].fbm +'/' + item.qyList[indexc+1].fzw}}</td>
                                <td v-if="item.qyList[indexc+1]==null">{{''}}</td>
                                <td v-else>
                                    <img v-if="item.qyList[indexc+1].fqmfj" :src="item.qyList[indexc+1].fqmfj" alt="企业签名">
                                    <span v-else>
                                        {{item.qyList[indexc+1].fxm}}
                                    </span>
                                </td>
                            </tr>
                            <tr v-if="item.qyList.length == 0">
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                            </tr>
                        </template>
                        <template v-if="tableData.hyList.length == 0">
                            <tr>
                                <th rowspan="2">{{ '' }}</th>
                                <td colspan="3" style="text-align: left;">会议时间：{{ '' }}</td>
                            </tr>
                            <tr>
                                <td colspan="3" style="text-align: left;">会议地点：{{ '' }}</td>
                            </tr>
                            <tr>
                                <th colspan="4">审评组参会人员签名</th>
                            </tr>
                            <tr>
                                <th>审评组</th>
                                <td colspan="3" style="text-align: left;">{{''}}</td>
                            </tr>
                            <tr>
                                <th>观察员</th>
                                <td colspan="3" style="text-align: left;">{{''}}</td>
                            </tr>
                            <tr>
                                <th colspan="4">企业参会人员签名</th>
                            </tr>
                            <tr>
                                <th>部门/职务</th>
                                <th>签名</th>
                                <th>部门/职务</th>
                                <th>签名</th>
                            </tr>
                            <tr v-for="index of 10" :key='index'>
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                                <td style="height: 40px !important;"></td>
                            </tr>
                        </template>
                    </table>
                </div>
            </div>
            <template slot="footer">
                <a-button class="blue-btn" @click="visible = false">关闭</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {querySqsxHyPrintInfo} from './service/index'
import moment from 'moment'
export default {
  data() {
    return {
      visible: false,
      tableKey: '',
      tableData: {},
      printObj:{
        id:"printTest", //需要打印的id名称
        popTitle:"会议签到表",//文档的名称
        // preview:true,//预览功能，不好用
        zIndex:'20002',
        beforeOpenCallback(vue){
            // //console.log('打印回调',vue)
        },
        openCallback (vue) {//打开之前
            // //console.log('打开之前',vue)
        },
        closeCallback (vue) {//关闭了打印工具
            // //console.log('关闭了打印工具')
        },
      },
      moment,
    }
  },
  methods:{
    getData(val){
        this.tableData = {}
        querySqsxHyPrintInfo({sqsxid:val.sqsxid}).then(res => {
            // //console.log(res)
            // if(res.result.hyList.length <= 0){
            //   this.$message.warning('打印会议签到表前请先添加会议记录')
            //   return
            // }
            this.tableData = res.result
            this.tableKey = Date.now()
            this.visible = true
        })
    },
  }
}
</script>
<style lang="less">
.meetingAttendanceForm-print-box {
    text-align: center;
    .meetingAttendanceForm-table {
        width: 100% !important;
        text-align: center;
        table-layout: fixed;
        font-family:宋体 !important;
        th {
            font-size: 18px;
            padding: 10px 0px;
        }
        td {
            font-size: 16px;
            padding: 5px;
            min-height: 40px !important;
        }
        img {
            width: 100px;
            height: 30px;
        }
    }
}
.meetingAttendanceForm-modal-Lu {
  .ant-modal {
    background-color: #5ca3e5;
    position: static;
    width: 100%;
    height: 100%;
    top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
  }
  .ant-modal-content {
    height: 100%;
  }
  .ant-modal-body {
    padding: 15px !important;
    background-color: white;
    overflow-y: scroll;
    height: calc(100vh - 108px) !important;
  }
  .ant-modal-wrap {
    background-color: white;
  }
}
</style>
